<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="码豆" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="beans">
			<view class="beans-desc">
				<view class="beans-desc-left">
					<text class="beans-desc-left-txt">码豆</text>
					<text class="beans-desc-left-num">{{ md }}</text>
				</view>
				<view class="beans-desc-middle">
					<view class="beans-desc-middle-line"></view>
				</view>
				<view class="beans-desc-right">
					<text class="beans-desc-right-txt">金豆</text>
					<text class="beans-desc-right-num">{{ jd }}</text>
					<view @click="onClickTXJD" class="beans-desc-right-tx">提现</view>
				</view>
			</view>
			<view class="beans-list">
				<view class="beans-list-title">消费明细</view>
				<block v-for="item of list" :key="item.id">
					<view class="beans-list-item">{{ item.time }}提现{{ item.num }}码豆</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import { config } from '@/utils/config.js' 
	import { myMixin } from '@/utils/mixin.js'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'

	export default {
		mixins: [myMixin],
		components: {
			uniNavBar
		},
		data() {
			return {
				md: '', // 码豆
				jd: '', // 金豆
				list: [] // 消费明细的记录表
			}
		},
		onLoad() {
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				})
				setTimeout(() => {
					uni.removeStorageSync('role')
					uni.removeStorageSync('memberId')
					uni.removeStorageSync('token')
					uni.removeStorageSync('openId')
					uni.reLaunch({
						url: '../verificationcodelogin/verificationcodelogin'
					})
				}, 777)
				return false
			}
			this._getBeansData()
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			_getBeansData() {
				uni.showLoading({ title: '加载中' })
				uni.request({
					url: `${config.api_base_url}member/member/myBeans`,
					header: {
						'AUTH': 'ROBOT ' + uni.getStorageSync('token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.jd = data.goldenBeans
							this.md = data.beans
						} else {
							this.jd = 0
							this.md = 0
						}
					}),
					fail: (() => {
						this.jd = 0
						this.md = 0
						uni.showToast({
							icon: 'none',
							title: '请求失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.hideLoading()
					})
				})
			},
			// 提现金豆
			onClickTXJD() {
				const jd = this.jd
				if (jd === 0) {
					uni.showToast({
						icon: 'none',
						title: '暂无金豆, 无法提现'
					})
					return false
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #F7F4F8;
	}
</style>
<style scoped>
	.beans {
		width: 100%;
		box-sizing: border-box;
		padding-top: 24rpx;
		padding-left: 14rpx;
		padding-right: 14rpx;
	}

	.beans-desc {
		height: 242rpx;
		border-radius: 20rpx;
		background: linear-gradient(180deg, rgba(252, 219, 0, 1) 0%, rgba(247, 181, 0, 1) 100%);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.beans-desc-left {
		width: 48%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.beans-desc-left-txt {
		font-size: 28rpx;
		font-weight: 500;
		color: #6D7278;
		line-height: 40rpx;
		margin-bottom: 4rpx;
	}

	.beans-desc-left-num {
		font-size: 52rpx;
		font-weight: 600;
		color: #fff;
		line-height: 74rpx;
	}

	.beans-desc-middle {
		width: 2%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.beans-desc-middle-line {
		width: 2rpx;
		height: 104rpx;
		background-color: #979797;
	}

	.beans-desc-right {
		width: 48%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding-top: 40rpx;
	}

	.beans-desc-right-txt {
		font-size: 28rpx;
		font-weight: 500;
		color: #6D7278;
		line-height: 40rpx;
		margin-bottom: 4rpx;
	}

	.beans-desc-right-num {
		font-size: 52rpx;
		font-weight: 600;
		color: #fff;
		line-height: 74rpx;
	}

	.beans-desc-right-tx {
		width: 160rpx;
		height: 40rpx;
		border: 2rpx solid #979797;
		font-size: 26rpx;
		color: #979797;
		line-height: 40rpx;
		text-align: center;
		font-weight: 600;
	}

	.beans-list {
		width: 100%;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding-left: 26rpx;
		padding-right: 20rpx;
		padding-bottom: 166rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.beans-list-title {
		width: 100%;
		height: 107rpx;
		box-sizing: border-box;
		padding-left: 10rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(0, 0, 0, 0.85);
		line-height: 40rpx;
		border-bottom: 1px solid #EEEEEE;
		padding-top: 38rpx;
	}

	.beans-list-item {
		display: flex;
		align-items: center;
		width: 100%;
		height: 73rpx;
		box-sizing: border-box;
		padding-left: 10rpx;
		border-bottom: 1px solid #EEEEEE;
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 40rpx;
	}
</style>
